<template>
  <div class="userAdd">
    <el-page-header title="企业网站门户管理系统" content="添加用户" />

    <el-form
      ref="userFormRef"
      style="max-width: 600px"
      :model="userForm"
      status-icon
      :rules="userFormRules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="userForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-select v-model="userForm.role" placeholder="请选择角色">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item.lable"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="简介" prop="introduction">
        <el-input
          v-model="userForm.introduction"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item label="头像" prop="avatar">
        <Upload :avatar="userForm.avatar" @zxychange="handleAvatar"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAddUser"> 添加用户 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import store from "@/store/index";
import {useRouter} from "vue-router";
import { computed, ref, reactive } from "vue";
const userFormRef = ref();
import Upload from "@/components/upload/Upload.vue";
import upload from "@/util/upload";
import { ElMessage } from "element-plus";

const router = useRouter()
const userForm = reactive({
  username: "",
  password: "",
  role: 2, //1管理员  2编辑
  avatar: "",
  introduction: "",
  file: null,
  gender:0 //0保密
});
// 角色
const options = [
  { lable: "管理员", value: 1 },
  { lable: "编辑", value: 2 },
];
// 用户表单规则
const userFormRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  introduction: [{ required: true, message: "请输入简介", trigger: "blur" }],
  avatar: [{ required: true, message: "请选择头像" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  role: [{ required: true, message: "请选择权限", trigger: "blur" }],
});

const handleAvatar = (file)=>{
   // console.log(file);  file.raw代表图片的原生对象
   userForm.avatar = URL.createObjectURL(file);
   userForm.file = file; //把头像的原生对象添加到提交表单数据中
}

// 添加用户
const submitAddUser = () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
        // 提交数据给后端
        // console.log(userForm);
        const res = await upload('/adminapi/user/addUser',userForm)
        if(res.data.ActionType === 'OK'){
          ElMessage.success("添加用户成功!")
        }
        // 添加成功,跳转到用户列表页
        router.push("/user-manage/userList")
    }
  });
};
</script>

<style scoped lang="scss">
.userAdd {
  width: 100%;
  height: 100vh;
  .el-form{
    max-width: 1200px !important;
    margin-top: 50px !important;
  }
  .card {
    width: 100%;
    margin-top: 30px;
    .el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}

::v-deep .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar {
  width: 178px;
  height: 178px;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
